<template>
	<view class="myInfo">
		<view class="myInfo-item">
			<view class="label">
				头像
			</view>
			<view class="myInfo-item-fr">
				<!-- <image class="avatar" src="../../static/images/moren.png" mode=""></image> -->
				<UploadImg :width="80" :height="80" keyName="avatar" @getUrl="getUrl"
					:uploadImg="formLine.avatar?formLine.avatar:'../../static/images/moren.png'" />
				<image class="arrow" src="../../static/images/arrow.png" mode=""></image>
			</view>
		</view>
		<view class="myInfo-item">
			<view class="label">
				昵称
			</view>
			<view class="myInfo-item-fr">
				<input type="text" placeholder="请输入" v-model="formLine.nickname" class="ipt" placeholder-class="styles">
				<image class="arrow" src="../../static/images/arrow.png" mode=""></image>
			</view>
		</view>
		<view class="myInfo-item">
			<view class="label">
				手机号
			</view>
			<view class="myInfo-item-fr">
				<text class="txt1">{{formLine.phone}}</text>
				<text class="txt2" @click="toVerifyPhonePage">更改</text>
			</view>
		</view>
		<view class="myInfo-item">
			<view class="label">
				ID
			</view>
			<view class="myInfo-item-fr">
				<text class="txt1">{{formLine.id}}</text>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="onSave">提交</view>
		</view>
	</view>
</template>

<script>
	import reqApi from "../../api/api.js";
	export default {
		data() {
			return {
				formLine: {
					avatar: "",
					nickname: "",
					id: "",
					phone: "",
					cardId: "411221199503220031"
				}
			}
		},
		onShow() {
			let userInfo = uni.getStorageSync("userInfo");
			this.formLine.id = userInfo.uid;
			this.formLine.phone = userInfo.phone;
			this.formLine.nickname = userInfo.nickname;
      this.formLine.avatar = userInfo.avatar;
		},
		methods: {
			getUrl(e) {
				console.log("子组件传过来的", e);
				const {
					keyName,
					value
				} = e;
				this.formLine[keyName] = value;
			},
			toVerifyPhonePage(){
				uni.navigateTo({
					url: "/pages/mine/verifyPhone"
				})
			},
			onSave() {
				reqApi.setUserInfo(this.formLine).then(res => {
					uni.showToast({
						title: "保存成功",
						icon: 'none',
						mask: true,
						duration: 1500,
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.footer {
		padding: 0 70rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 30rpx;
		width: 100%;

		.btn {
			width: 100%;
			height: 88rpx;
			background: #EEA800;
			border-radius: 88rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
		}
	}

	.myInfo {
		background: #fff;
		.myInfo-item {
			display: flex;
			justify-content: space-between;
			height: 104rpx;
			align-items: center;
			border-bottom: 2rpx solid #eee;
			padding: 0 30rpx 0 40rpx;
			box-sizing: border-box;

			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
			}

			.myInfo-item-fr {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;

				.txt1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
				}

				.txt2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #EEA800;
					margin-left: 16rpx;
				}

				.ipt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					// color: #222;
					color: #999;
					text-align: right;
				}

				.styles {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #999999;
				}

				.avatar {
					width: 68rpx;
					height: 68rpx;
				}

				.arrow {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
	}
</style>
